<template>
  <!-- 详情信息 -->
  <div class="detail">
    <div class="topItem">
      <div class="logo"><img :src="detail.logo" alt=""></div>
    </div>
    <div class="centerItem">
      <div class="videoBox"><img class="img" :src="detail.video" alt=""></div>
      <div class="detailBox">
        <div class="de_item1">
          <h3 class="title">{{ detail.title }}</h3>
        </div>
        <div class="de_item2">
          <span v-if="detail.corporate" class="corporate">{{ detail.corporate }}</span>
          <div v-if="detail.score" class="score">评分 ：{{ detail.score }}</div>
        </div>
        <div class="de_item3">
          <div>年份：{{ detail.year }}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</div>
          <div>地区：{{ detail.are }}&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</div>
          <div>集数：共{{ detail.total }}集</div>
        </div>
        <div class="de_item4">
          <div>导演：{{ detail.director }}&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</div>
          <div>主演：{{ detail.actor }}</div>
        </div>
        <div class="de_item5">
          <div class="intr">简介：{{ introduction }}</div>
          <div class="btn">展开全部</div>
        </div>
        <div class="de_item6">
          <div class="play">播放</div>
          <div class="collect">收藏</div>
          <template v-if="widgetData.isShow == 0 && widgetData.value.length > 0">
            <div class="recomm" v-for="(item, index) in widgetData.value" :key="'a' + index"
              :class="{ 'comBorder': comClass == 'a' + index }" @click="handleClick($event, widgetData, item, 'a' + index)">
              <span>{{ item.name }}</span>
              <i @click.stop="deleteItem($event, widgetData, item, index)" class="el-icon-error"></i>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSubStr } from '@/commont/utils/stringUtil.js'
export default {
  components: {},
  props: {
    widgetData: {
      type: Object,
      required: true
    },
    comClass: {
      type: null,
      default: null
    },
    // 热力图
    mapData: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      detail: this.widgetData.detail,
    }
  },
  computed: {
    introduction() {
      return getSubStr(this.detail.introduction, 110, true)
    }
  },
  watch: {},
  created() { },
  mounted() { },
  updated() { },
  methods: {
    // 属性
    handleClick(e, items, item, idx) {
      this.$emit('detailRecomm', e, items, item, idx)
    },
    // 删除
    deleteItem(e, items, item, index) {
      this.$emit('deleteItem', e, items, item, index)
    },
  },
  filters: {},
}
</script>

<style lang="scss" scoped>
.detail {
  width: 100%;
  height: 100%;
  padding: 10px;
  // background: url('../../../../assets/images/bg.png');
  position: relative;

  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }

  .topItem {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .logo {
      margin-right: 20px;
    }
  }

  .centerItem {
    width: 100%;
    height: 90%;
    display: flex;
    padding: 5px;
    margin-top: -25px;

    .videoBox {
      width: 40%;
      margin-top: 10px;

      .img {
        border-radius: 10px;
      }
    }

    .detailBox {
      width: calc(100% - 350px);
      height: 310px;
      margin-left: 15px;
      color: #FFFFFF;

      .de_item1 {
        .title {
          font-size: 24px;
        }
      }

      .de_item2 {
        margin-top: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .corporate {
          color: #174c8e;
          background-color: #41bff2;
          font-size: 18px;
          padding: 3px 5px;
          border-radius: 15px;
        }

        .score {
          font-size: 20px;
          color: #ffde00;
        }
      }

      .de_item3,
      .de_item4 {
        display: flex;
        margin-top: 15px;
        font-size: 20px;
      }

      .de_item5 {
        display: flex;
        margin-top: 15px;
        font-size: 20px;
        position: relative;

        .intr {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          /*弹性伸缩盒子*/
          -webkit-box-orient: vertical;
          /*子元素垂直排列*/
          -webkit-line-clamp: 3;
          /*可以显示的行数，超出部分用...表示*/
        }

        .btn {
          width: 100px;
          height: 30px;
          line-height: 28px;
          color: #519ac4;
          text-align: center;
          position: absolute;
          right: 0;
          top: 55px;
          border: 1px solid;
          border-radius: 5px;
        }
      }

      .de_item6 {
        display: flex;
        margin-top: 20px;
        font-size: 22px;

        .play,
        .collect {
          width: 100px;
          height: 35px;
          line-height: 35px;
          text-align: center;
          background-color: #5dace0;
          border-radius: 5px;
        }

        .collect {
          margin-left: 20px;
        }

        .recomm {
          width: 100px;
          height: 35px;
          line-height: 35px;
          text-align: center;
          background-color: #5dace0;
          border-radius: 5px;
          margin-left: 20px;
          position: relative;

          &:hover {
            .el-icon-error {
              display: block;
            }
          }

          .el-icon-error {
            position: absolute;
            right: -10px;
            top: -6px;
            color: red;
            font-size: 25px;
            cursor: pointer;
            display: none;
            z-index: 9999;
          }
        }
      }

      .comBorder {
        box-shadow: rgba(202, 38, 250, 0.8) 0px 0px 10px 5px;
      }
    }
  }
}
</style>